<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible"
        content="ie=edge">
  <title>Document</title>
</head>

<body>
  <form>
    <div>
      <label for="image_uploads">Choose images to upload (PNG, JPG)</label>
      <input type="file"
             id="image_uploads"
             name="image_uploads"
             accept=".jpg, .jpeg, .png"
             multiple>
    </div>
    <div class="preview">
      <p>No files currently selected for upload</p>
    </div>
    <div>
      <button>Submit</button>
    </div>
  </form>
  <script>
    var fileTypes = [
      'image/jpeg',
      'image/pjpeg',
      'image/png'
    ]

    function validFileType(file) {
      for (var i = 0; i < fileTypes.length; i++) {
        if (file.type === fileTypes[i]) {
          return true;
        }
      }

      return false;
    }
    function returnFileSize(number) {
      if (number < 1024) {
        return number + 'bytes';
      } else if (number > 1024 && number < 1048576) {
        return (number / 1024).toFixed(1) + 'KB';
      } else if (number > 1048576) {
        return (number / 1048576).toFixed(1) + 'MB';
      }
    }
    // 获取 input 元素
    var input = document.querySelector('input');
    // 获取 preview 元素
    var preview = document.querySelector('.preview');
    // 将 input 变成透明的
    input.style.opacity = 0;
    input.addEventListener('change', updateImageDisplay);

    function updateImageDisplay() {
      while (preview.firstChild) {
        preview.removeChild(preview.firstChild);
      }

      var curFiles = input.files;
      if (curFiles.length === 0) {
        var para = document.createElement('p');
        para.textContent = 'No files currently selected for upload';
        preview.appendChild(para);
      } else {
        var list = document.createElement('ol');
        preview.appendChild(list);
        for (var i = 0; i < curFiles.length; i++) {
          var listItem = document.createElement('li');
          var para = document.createElement('p');
          if (validFileType(curFiles[i])) {
            para.textContent = 'File name ' + curFiles[i].name + ', file size ' + returnFileSize(curFiles[i].size) + '.';
            var image = document.createElement('img');
            image.src = window.URL.createObjectURL(curFiles[i]);

            listItem.appendChild(image);
            listItem.appendChild(para);
          } else {
            para.textContent = 'File name ' + curFiles[i].name + ': Not a valid file type. Update your selection.';
            listItem.appendChild(para);
          }

          list.appendChild(listItem);
        }
      }
    }

  </script>
</body>

</html>